<template>
  <div>
    <div class="register_con">
      <div class="l_con fl">
        <a href="index.html" class="reg_logo"><img src="@static/images/logo.png"></a>
        <div class="reg_slogan">商品美 · 种类多 · 欢迎光临</div>
        <div class="reg_banner"></div>
      </div>

      <div class="r_con fr">
        <div class="reg_title clearfix">
          <h1>用户注册</h1>
          <a href="login.html">登录</a>
        </div>
        <div class="reg_form clearfix">
          <form method="post" class="register_form">
            <ul>
              <li>
                <label>用户名:</label>
                <input type="text" name="user_name" id="user_name"
                       v-model="form.username" @blur="checkusername">
                <span class="error_tip">{{ error.username }}</span>
              </li>
              <li>
                <label>密码:</label>
                <input type="password" name="pwd" id="pwd"
                       v-model="form.password1" @blur="checkusername">
                <span class="error_tip">{{ error.password1 }}</span>
              </li>
              <li>
                <label>确认密码:</label>
                <input type="password" name="cpwd" id="cpwd"
                       v-model="form.password2" @blur="checkpassword">
                <span class="error_tip">{{ error.password2 }}</span>
              </li>
              <li>
                <label>手机号:</label>
                <input type="text" name="phone" id="phone"
                       v-model="form.mobile" @blur="checkmobile">
                <span class="error_tip">{{ error.mobile }}</span>
              </li>
              <li>
                <label>图形验证码:</label>
                <input type="text" name="pic_code" id="pic_code" class="msg_input" v-model="imagecode">
                <img :src="imageurl" alt="图形验证码" class="pic_code" @click="get_image">
                <span class="error_tip">{{ error.yanzhengma }}</span>
              </li>
              <li>
                <label>短信验证码:</label>
                <input type="text" name="msg_code" id="msg_code" class="msg_input" v-model="form.code">
                <button @click.prevent='getSmsCode' :disabled='flag' @click="get_image">{{ mes }}</button>
                <span class="error_tip">{{  error.duanxin  }}</span>
              </li>
              <li class="agreement">
                <input type="checkbox" name="allow" id="allow" checked="checked"
                       v-model="form.agree" @blur="is_show">
                <label>同意”美多商城用户使用协议“</label>
                <span class="error_tip">{{ error.agree }}</span>
              </li>
              <li class="reg_sub">
                <input type="submit" value="注 册">
              </li>
            </ul>
          </form>
        </div>

      </div>

    </div>

    <div class="footer no-mp">
      <div class="foot_link">
        <a href="#">关于我们</a>
        <span>|</span>
        <a href="#">联系我们</a>
        <span>|</span>
        <a href="#">招聘人才</a>
        <span>|</span>
        <a href="#">友情链接</a>
      </div>
      <p>CopyRight © 2016 北京美多商业股份有限公司 All Rights Reserved</p>
      <p>电话：010-****888 京ICP备*******8号</p>
    </div>
  </div>
</template>

<script>
import "@static/css/reset.css"
import "@static/css/main.css"
import {v4 as uuid4} from "uuid"

export default {
  name: "Reg",
  data() {
    return {
      form: {show:false},
      error: {username: "", password1: "", password2: "", mobile: "",duanxin:"", yanzhengma: "", agree: ""},
      flag: false,
      imagecode: "",
      imageurl: "",
      imagenum: "",
      mes: '获取短信验证码',
      time: 60
    }
  },
  methods: {
    // 用户名
    checkusername() {
      // 格式是否正确 5-10位字符
      let reg = /\w|[\u0391-\uFFE5]{5,20}$/
      if (!reg.test(this.form.username)) {
        this.error.username = "请输入正确的格式"
        return false
      } else {
        this.error.username = ""
      }
      // 唯一性验证
      this.axios.post('reg/', this.form).then(res => {
        console.log(res)
        if (res.data.code == 1001) {
          this.error.username = res.data.meg
          return false
        }else if(res.data.code == 1002) {
          this.error.username = res.data.meg
          return false
        }else {
          this.error.username = ""
        }
      })
      let ref = /\w{8,20}$/
      if (ref.test(this.form.password1)) {
        this.error.mobile = "请输入正确格式"
        return false
      } else {
        this.error.password1 = ""
      }
    },
    // 密码
    checkpassword() {
      if (this.form.password1 != this.form.password2) {
        this.error.password2 = '密码输入不一致'
        return false
      } else {
        this.error.password2 = ''
      }
    },
    // 验证手机号
    checkmobile() {
      let reh = /^1[3-9]\d{9}$/
      if (!reh.test(this.form.mobile)) {
        this.error.mobile = "请输入正确格式"
      }else {
        this.error.mobile=""
      }
    },
    // 获取验证码图片
    get_image() {
      this.imagenum = uuid4()
      this.imageurl = "http://127.0.0.1:8000/createCaptcha/?uuid=" + this.imagenum
    },
    //获取短信验证码
    getSmsCode() {
      //获取手机号
      this.axios.post('sendSms/', {"uid":this.imagenum,"imagecode":this.imagecode,'mobile': this.form.mobile}).then(res => {
        //成功后开始倒计时,把按钮变成disabled
        if (res.data.code == 200) {
          let m = setInterval(() => {
            //time -1
            this.time--
            //按钮变为不能用
            this.flag = true
            //文字发生变化
            this.mes = this.time + '秒以后再操作'
            if (this.time == 0) {
              clearInterval(m)
              this.time = 60
              this.flag = false
              this.mes = '获取短信验证码'
            }

          }, 1000);

        }
      })
    },
    is_show() {
      if (this.form.agree == false) {
        this.error.agree = '请勾选用户协议'
      } else {
        this.error.agree = "ok"
      }
    },
    //注册
    reg() {
         this.axios.post("reg/",this.form).then(res=>{
           console.log(res)
           if (res.data.code == 2001) {
             this.error.password1 = res.data.meg
             return false
           } else if (res.data.code == 2002) {
             this.error.password2 = res.data.meg
             return false
           } else if (res.data.code == 3001) {
             this.error.mobile = res.data.meg
             return false
           } else if (res.data.code == 200) {
             alert(res.data.meg)
             localStorage.setItem('userid',res.data.userid)
             localStorage.setItem('username',res.data.username)
             this.$router.push('')
           }
           if (res.data.code == 4001) {
             this.error.duanxin = res.data.meg
             return false
           } else {
             this.error.duanxin = ""
           }
           if (res.data.code == 5001) {
             this.error.agree = res.data.meg
             return false
           } else {
             this.error.agree = ""
           }
         })
    }
  },
  mounted() {
    this.get_image()
  }
}
</script>

<style scoped>

</style>
